<template>
    <view>
        <uni-popup ref="sendCodeRef" :maskClick="false" :maskBackgroundColor="'rgba(0, 0, 0, 0.6)'">
            <view class="code-form-main">
                <uni-forms ref="baseForm" :modelValue="sendCodeForm">
                    <uni-forms-item>
                        <uni-easyinput :inputBorder="false" disabled v-model="sendCodeForm.account" placeholder="请输入手机号" />
                    </uni-forms-item>
                    <uni-forms-item>
                        <view class="code-item">
                            <uni-easyinput trim="all" type="number" placeholder="请输入验证码" :placeholderStyle="placeholderStyle" :inputBorder="false"  maxlength="6" v-model="sendCodeForm.code" />
                            <button @click="sendCode" type="default" :loading="sendCodeTextDisabled"
                                :disabled="sendCodeTextDisabled"
                                :style="{ backgroundColor: sendBtnDisabled ? '#DCDCDC' : '#276FF7', fontSize:sendCodeTextDisabled ? '22rpx' : '30rpx'  }" class="send-code"
                                style="margin-left: 20rpx;">{{ codeBtnName }}</button>
                        </view>
                    </uni-forms-item>
                </uni-forms>
                <view class="footer-btn-box" style="width: 100%;">
                    <button @click="closeSendForm" class="cancle-btn">取消</button>
                    <button :loading="subLoading" :disabled="subLoading" @click="sendCodeFormSubmit" type="primary"
                        class="confirm-btn">确定</button>
                </view>
            </view>
        </uni-popup>
    </view>

</template>

<script>
import {
    getReturnLoginSms,
    getReturnSendSms,
} from "@/api/user";
import { getConfigObj } from '@/api/system'
import {
    needCodeApi,
    sendCodeApi,
} from "@/api/water";
export default {
     // #ifdef MP-WEIXIN
    options: {
        styleIsolation: 'shared' // 解除样式隔离
    },// #endif

    data() {
        return {
            sendCodeForm: { //验证码输入完成后提交对象
                account: '',
                code: '',
            },
            sendBtnDisabled: false,
            sendCodeTextDisabled: false,
            codeTime: 60,
            codeTimer: null,
            codeForm: { // 发送验证码对象

            },
            subLoading: false,
            detailInfo: {},
            isWebLogin: false,
            placeholderStyle: {
                color: '#000'
            }
        }
    },
    computed: {
        codeBtnName() {
            if (this.codeTime == 60) {
                return '发送验证码'
            } else if (1 < this.codeTime < 60) {
                return `${this.codeTime}s后重发`
            } else if (this.codeTime == 1) {
                // return 
                this.codeTime = 10
                return '发送验证码'
            }

        }
    },
    methods: {
        open(sendCodeForm, codeForm, detailInfo) {
            this.resetCodeForm()
            getConfigObj('tax_login_isWeb').then(res=> {
                this.isWebLogin = res.data.tax_login_isWeb == 0 ? true : false
            })
            this.sendCodeForm = Object.assign({}, sendCodeForm, { code: '' })
            this.codeForm = codeForm
            this.detailInfo = detailInfo
            this.$refs.sendCodeRef.open()
        },
        closeSendForm() {
            this.codeForm = {}
            this.sendCodeForm = {
                account: '',
                code: ''
            }
            clearInterval(this.codeTimer)
            this.codeTimer = null
            this.codeTime = 60
            this.subLoading = false
            this.sendCodeTextDisabled = false;
            this.sendBtnDisabled = false
            this.$refs.sendCodeRef.close()
        },

        resetCodeForm() {
            this.sendCodeForm.code = ''
            clearInterval(this.codeTimer)
            this.codeTimer = null
            this.codeTime = 60
            this.subLoading = false
            this.sendCodeTextDisabled = false;
            this.sendBtnDisabled = false
        },

        //提交
        sendCodeFormSubmit() {
            if (this.sendCodeForm.code == '') return this.$util.Tips('请输入验证码')
            this.subLoading = true
            //APP登录
            if (!this.isWebLogin) {
                let params = {
                    taskId: this.detailInfo.taskId,
                    creditCode: this.detailInfo.creditCode,
                    uuid: this.codeForm.uuid,
                    code: this.sendCodeForm.code,
                    account: this.sendCodeForm.account
                }
                getReturnLoginSms(params).then(res => {
                    if (res.code == 200) {
                        this.$refs.sendCodeRef.close()
                        this.searchSuccess(false)
                    } else if (res.code == 5000) {
                        this.$util.Tips({ title: '登录异常，请重试', endtime: 1000 }, () => {
                            this.isWebLogin = true
                            this.resetCodeForm()
                        })
                    } else if(res.code == 5100) {
                        this.$util.Tips({ title: '登录已过期，请重新登录', endtime: 1000 }, () => {
                            this.closeSendForm()
                        })
                    }

                }).catch(error => {
                    console.log("error", error)
                }).finally(() => {
                    this.subLoading = false
                })
            } else {
                //WEB登录
                let params = {
                    provinceName: this.codeForm.province,
                    creditCodeOrTaxPayerId: this.detailInfo.creditCode,
                    phoneNumber: this.sendCodeForm.account,
                    password: this.codeForm.password,
                    code: this.sendCodeForm.code,
                    enterpriseId: this.codeForm.enterpriseId,
                    uuid: this.codeForm.webUuid,
                    taskId: this.detailInfo.taskId,
                    source: 'share'
                }
                needCodeApi(params).then(res => {
                    if (res.code == 200) {
                        this.$refs.sendCodeRef.close()
                        this.searchSuccess(false)
                    } else if (res.code == 5000) {
                        this.$util.Tips({ title: '登录异常，请重试', endtime: 1000 }, () => {
                            this.isWebLogin = true
                            this.resetCodeForm()
                        })
                    } else if(res.code == 5100) {
                        this.$util.Tips({ title: '登录已过期，请重新登录', endtime: 1000 }, () => {
                            this.closeSendForm()
                        })
                    }
                }).finally(v => {
                    this.subLoading = false
                }).catch(error => {
                    console.log("error", error)
                })
            }
        },
        sendCode() {
            if (!this.sendCodeForm.account) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                })
                return
            }
            if (this.sendBtnDisabled) {
                return
            }
            if (this.sendCodeForm.account) {
                this.sendCodeTextDisabled = true;
                if (!this.isWebLogin) { // app 获取验证码
                    getReturnSendSms(this.codeForm).then(res => {
                        if (res.data) {
                            this.$util.Tips({
                                title: '发送验证码成功'
                            })
                            this.getCodeHandle()
                        }
                    }).finally((v) => {
                        this.sendCodeTextDisabled = false;
                    })
                } else { //web 端获取验证码
                    let params = {
                        creditCodeOrTaxPayerId: this.detailInfo.creditCode,
                        phone: this.codeForm.account,
                        uuid: this.codeForm.webUuid
                    }
                    sendCodeApi(params).then(res => {
                        if (res.data) {
                            this.$util.Tips({
                                title: '发送验证码成功'
                            })
                            this.getCodeHandle()
                        }
                    }).finally((v) => {
                        this.sendCodeTextDisabled = false;
                    })
                }



            }
        },

        searchSuccess(val) {
            this.$emit('searchSuccess', val)
        },
        getCodeHandle(val) {
            this.sendBtnDisabled = true
            this.codeTimer = setInterval(() => {
                if (this.codeTime == 1) {
                    clearInterval(this.codeTimer)
                    this.sendBtnDisabled = false
                    this.codeTime = 60
                    this.codeTimer = null
                } else {
                    this.codeTime--
                }
            }, 1000)
        },
    },
}
</script>

<style lang="scss" scoped>
.code-form-main {
    width: 560rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 60rpx 30rpx;

    /deep/ .uni-easyinput__content-input {
        height: 84rpx;
    }

    /deep/ .is-disabled {
        background-color: #F5F5F5 !important;
        color: #000 !important;
        border: none !important;
    }

    /deep/ .uni-easyinput__content {
        background-color: #F5F5F5 !important;
        color: #000 !important;
        border: none !important;
        border-radius: 20rpx !important;
    }
    /deep/ .uni-forms-item {
        margin-bottom: 30rpx !important;
    }

    //.is-input-border
    .code-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .send-code {
            width: 200rpx;
            height: 70rpx;
            line-height: 70rpx;
            color: #fff;
            font-size: 30rpx;
            font-weight: bold;
        }
        

    }
    .footer-btn-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
         .cancle-btn {
            width: 225rpx;
            height: 84rpx;
            background: #F6F9F8;
            border-radius: 6rpx;
            overflow: hidden;
            font-weight: 500;
            font-size: 32rpx;
            color: #999999;
            margin-right: 26rpx;
        } 
        .confirm-btn {
            margin-left: 26rpx;
             width: 225rpx;
            height: 84rpx;
            background: #276FF7;
            border-radius: 6rpx;
        }
    }


}
</style>